///////////////滑过用户名显示更多窗口////////////////////
$(document).ready(function(){
    window.onload=function(){
        // 获取用户名和窗口标签
        var userBox=document.querySelector('.user-box')
        var userMoreList=document.querySelector('.user-more-list')
        // 获取窗口下所有a标签
        var userItems=document.querySelectorAll('.user-more-list>a')
        // console.log(userItems)
        // console.log(jsUserName)
        // 添加滑过事件
        userBox.onmouseover=function(){
            // 滑过用户名显示窗口
            userMoreList.style.display='block'
        }
        // 添加书鼠标移出隐藏事件
        userMoreList.onmouseout=function(){
            // 鼠标移出隐藏窗口
            this.style.display='none'
        }
        // 遍历窗口下的所有a标签
        for(var a=0;a<userItems.length;a++){
            // 添加鼠标滑过窗口a标签事件
            userItems[a].onmouseover=function(){
                this.style.color='#999'
            }
            // 添加鼠标移出a标签事件
            userItems[a].onmouseout=function(){
                this.style.color='#666'
            }
        }
    
        // 获取购物车标签
        var cartBox=document.querySelector('.cart-box')
        // 获取购物车状态标签
        var cartDetailBox=document.querySelector('.cart-detail-box')
        // console.log(cartBox)
        // 添加鼠标滑过购物车标签事件
        cartBox.onmouseover=function(){
            // 鼠标滑过购物车显示购物车状态
            cartDetailBox.style.display='block'
        }
        // 添加鼠标移出购物车标签事件
        cartBox.onmouseout=function(){
            // 鼠标滑过购物车显示购物车状态
            cartDetailBox.style.display='none'
        }
        
    }
})



// 定义购物车没有数据时显示的页面
var str = `
    <div class="kongcart">
        <div class="cartEmptyx">
            <div class="wrapper">
                <img class="kongCart-img" src="./images/shoppingCart01.png" alt="">
                <p>您的购物车居然是空的</p>
                <a class="goshopping" href="productList.html">去逛逛</a>
            </div>
        </div>
    </div>
`
$(document).ready(function() {
    // 检查用户是否登录
    username = getCookie('username')
    if(!username) {
        // 提示用户必须登录才能访问，强制跳转会登录页面，登录成功后再回来
        layer.msg('非法访问！请先登录！', {
            icon: 2,
            time: 1500
        }, function() {
            localStorage.setItem('url', location.href)
            location.href = 'login.html'
        })
    }
    // 获取本地存储中存储的购物车数据
    var cartData = localStorage.getItem('cartData')
    // 判断是否有数据
    if(!cartData) {
        $('.gCart').empty() // 不显示表格
        $('.gCart').html(str)
    } else {
        // 判断数据中是否当前用户的数据
        cartData = JSON.parse(cartData) // 将获取到的json字符串转成数组
        // 从数组中过滤出当前用户的数据
        var userData = cartData.filter(item => item.username === username)
        // 判断
        if(userData.length) {
            // 有 - 根据当前用户数据中的id获取到商品所有信息
            $.get('/api/getGoods', res => {
                res = JSON.parse(res)
                var data = res.data
                console.log('所有商品', data);
                console.log('当前用户的购物车数据', userData);
                // 从所有数据中筛选出当前用户的所有商品数据
                // 遍历userData
                var arr = []
                userData.forEach(item => {
                    // item.id
                    arr.push(data.find(v => v.goods_id == item.id))
                })
                console.log(arr);
                // 能渲染了
                var html = ''
                arr.forEach(item => {
                    var number = userData.find(v => v.id == item.goods_id).number
                    console.log(item);
                    html += `
                        <tr data-id="${item.goods_id}">
                            <td><input type="checkbox" name="checkOne"></td>
                            <td>
                                <img width="100" height="100" src="${item.img_big_logo}" />
                            </td>
                            <td>${item.name.slice(0, 15) + '...'}</td>
                            <td class="price">${item.price.cur_price}</td>
                            <td class="number">
                                <button class="reduce">-</button>
                                <input style="width: 50px;" type="number" value="${number}" />
                                <button class="add">+</button>
                            </td>
                            <td class="subtotal">${item.price.cur_price}</td>
                            <td><button class="btn btn-danger del">删除</button></td>
                        </tr>
                    `
                })
                
                $('.gCart table tbody').html(html)
                // 操作页面中的数据实现购物车功能
                // 全选功能
                checkAll()
                // 单选功能
                checkOne()
                // 数量加和减
                addAndReduce()
                // 删除单个商品的功能
                del()
                // 删除选中的商品
                remove()
                // 计算小计、总数量、总价格
                total()
            })
            
        } else {
            // 没有
            $('.gCart').empty() // 不显示表格
            $('.gCart').html(str)
        }
    }
})
// 计算小计、总数量、总价格的功能
function total() {
    // 小计
    $('.price').each(function(i, v) {
        var price = $(v).text().slice(1)-0
        var number = $(v).next().find('input').val()-0
        console.log(111,$(v).text());
        var subtotal = price * number
        $(v).next().next().text("¥"+ subtotal)
    })
    // 总数量和总价格
    var num = 0
    var totalPrice = 0
    $('[name="checkOne"]:checked').each(function(i, v) {
        num += $(v).parent().siblings('.number').find('input').val()-0
        
        totalPrice += $(v).parent().siblings('.subtotal').text().slice(1)-0
        
    })
    $('.totalNum').text(num)
    $('.totalPrice').text("¥"+totalPrice)
}
// 删除选中商品的功能
function remove() {
    $('.remove').click(function() {
        layer.confirm('你确定要删除吗？', {
            btn: ['确定', '取消']
        }, () => {
            // 获取本地存储数据
            var cartData = localStorage.getItem('cartData')
            cartData = JSON.parse(cartData)
            $('[name="checkOne"]:checked').each(function(i, v) {
                var id = $(v).parent().parent().attr('data-id')
                var index = cartData.findIndex(item => item.username === username && item.id == id)
                console.log(index);
                cartData.splice(index, 1)
            })
            localStorage.setItem('cartData', JSON.stringify(cartData))
            // 删除页面中的tr
            $('[name="checkOne"]:checked').parent().parent().remove()
            if(!$('table table').html()) {
                $('.gCart').empty() // 不显示表格
                $('.gCart').html(str)
            }
            layer.msg('删除成功', {
                icon: 1,
                time: 1500
            })
            total()
        }, () => {
            layer.msg('取消删除成功', {
                icon: 1,
                time: 1500
            })
        })

    })
}
// 删除单个商品的功能
function del() {
    $('.del').click(function() {
        layer.confirm('你确定要删除吗？', {
            btn: ['不要了', '留着吧']
        }, () => {
            // 将本地存储中的数据也删掉
            var cartData = localStorage.getItem('cartData')
            cartData = JSON.parse(cartData)
            var id = $(this).parent().parent().attr('data-id')
            var index = cartData.findIndex(item => item.username === username && item.id == id)
            cartData.splice(index, 1)
            localStorage.setItem('cartData', JSON.stringify(cartData))
            $(this).parent().parent().remove()
            if(!$('table table').html()) {
                $('.gCart').empty() // 不显示表格
                $('.gCart').html(str)
            }

            layer.msg('删除成功！', {
                icon: 1,
                time: 1500
            })
            total()
        }, function() {
            layer.msg('留下了', {
                icon: 1,
                time: 1500
            })
        })
    })
}
// 数量加减的功能
function addAndReduce() {
    // 加
    $('.add').click(function() {
        var num = $(this).prev().val()
        num++
        $(this).prev().val(num)
        // 让本地存储中的number跟当前改变后的number保持一致
        // 获取本地存储数据
        var cartData = localStorage.getItem('cartData')
        cartData = JSON.parse(cartData)
        // console.log(cartData);
        var userData = cartData.filter(item => item.username === username)
        console.log(userData);
        // 获取当前点击的这个商品的id
        var id = $(this).parent().parent().attr('data-id')
        console.log(id);
        // 从userData中找到商品id为获取到的id的对象，让他的number跟上面++以后的num保持一致
        var obj = userData.find(item => item.id == id)
        obj.number++
        // console.log(cartData);
        localStorage.setItem('cartData', JSON.stringify(cartData))
        total()
    })
    // 减
    $('.reduce').click(function() {
        var num = $(this).next().val()
        num--
        if(num < 1) {
            return false
        }
        $(this).next().val(num)
        // 让本地存储中的number跟当前改变后的number保持一致
        // 获取本地存储数据
        var cartData = localStorage.getItem('cartData')
        cartData = JSON.parse(cartData)
        // console.log(cartData);
        var userData = cartData.filter(item => item.username === username)
        console.log(userData);
        // 获取当前点击的这个商品的id
        var id = $(this).parent().parent().attr('data-id')
        console.log(id);
        // 从userData中找到商品id为获取到的id的对象，让他的number跟上面++以后的num保持一致
        var obj = userData.find(item => item.id == id)
        obj.number--
        // console.log(cartData);
        localStorage.setItem('cartData', JSON.stringify(cartData))
        total()
    })
}
// 单选功能
function checkOne() {
    // 给单选绑定事件
    $('[name="checkOne"]').click(function() {
        // 判断是否全部选中
        var arr = Array.from($('[name="checkOne"]'))
        // console.log(arr);
        var bool = arr.every(item => item.checked)
        $('[name="checkAll"]').prop('checked', bool)
        total()
    })
}
// 实现全选功能的函数
function checkAll() {
    // 给全选绑定单击事件
    $('[name="checkAll"]').click(function() {
        // 让所有的单选
        $('[name="checkOne"]').prop('checked', $(this).prop('checked'))
        $('[name="checkAll"]').prop('checked', $(this).prop('checked'))
        total()
    })
}


 //////////////////获取cookie////////////////
$(document).ready(function(){
    window.onload = function() {
        // 获取cookie
        var username = getCookie('username')
        // 做判断
        if(username) {
            // 换内容
            // 获取标签
            var loginAndRegister = document.querySelector('.loginAndRegister');
            // 给标签设置内容
            loginAndRegister.innerHTML = `
            <a href="./personalData.html"><span>欢迎<b style="margin: 0 10px;">${username}</b></span></a>
                <a onclick="logout()" href="javascript:;">退出</a>
            `
        }
    }
    
})
function logout() {
    if(confirm('你确定要退出吗？')) {
        removeCookie('username')
        var loginAndRegister = document.querySelector('.loginAndRegister');
        loginAndRegister.innerHTML = `
            <a href="login.html">登录</a>
            <a href="register.html">注册</a>
        `
    }
}


 